@import 'compass/reset.scss';
@import 'compass/utilities/general/clearfix';
@import 'compass/css3/text-shadow';
@import 'compass/css3/box-shadow';
@import 'compass/css3/border-radius';
@import 'compass/css3/opacity';
@import '960/960_grid';
@import '960/960_text';
@import 'partials/browser_support';

@import 'jquery.lightbox-0.5';

$ninesixty-columns: 24;
$ninesixty-grid-width: 960px;
$ninesixty-gutter-width: 10px;

@mixin wrapper960 {
  width: $ninesixty-grid-width;
  margin: 0 auto 0 auto;
}

/* Firefox and Chrome on Windows don't anti-alias type, so we can "force" a correction of this issue */
@mixin fix-type {
  text-shadow: rgba(255, 255, 255, 0.2) 0 0 1px;
}

$body-bg: #5584D4;
$clarendon-font: 'ClarendonRoman', "Lucida Grande", Arial, Helvetica, sans-serif;
$handwritten-font: 'DakotaRegular', Arial, Helvetica, sans-serif;
@mixin clarendon-font {
  font-family: $clarendon-font;
  @include fix-type;
}
@mixin handwritten-font {
  font-family: $handwritten-font;
  @include fix-type;
}

/* fonts generated from http://www.fontsquirrel.com/ */
/* revised format basedd on http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax */
/* IE and Firefox must load fonts from application domain, so just load all fonts from there */
@font-face {
  font-family: 'ClarendonRoman';
  src: url('<%=Rails.configuration.fonts_domain%>/assets/fonts/clarendon-bt-webfont.eot?#iefix') format('embedded-opentype'),
     url('<%=Rails.configuration.fonts_domain%>/assets/fonts/clarendon-bt-webfont.woff') format('woff'),
     url('<%=Rails.configuration.fonts_domain%>/assets/fonts/clarendon-bt-webfont.ttf')  format('truetype'),
     url('<%=Rails.configuration.fonts_domain%>/assets/fonts/clarendon-bt-webfont.svg#svgFontName') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'DakotaRegular';
    src: url('<%=Rails.configuration.fonts_domain%>/assets/fonts/dakota-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('<%=Rails.configuration.fonts_domain%>/assets/fonts/dakota-regular-webfont.woff') format('woff'),
       url('<%=Rails.configuration.fonts_domain%>/assets/fonts/dakota-regular-webfont.ttf')  format('truetype'),
       url('<%=Rails.configuration.fonts_domain%>/assets/fonts/dakota-regular-webfont.svg#svgFontName') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #E9E9E9;
  font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
}

b {
  font-weight: bold;
}

header {
  background: #000 image-url('embed/header_bg.png') repeat-x;
  height: 33px;
  .wrapper {
    @include wrapper960;
    nav {
      margin: 0 auto 0 auto;
      padding-top: 4px;
      color: white;
      font-size: 14px;
      @include clarendon-font;
      @include grid($ninesixty-columns);
      a {
        color: #FFF;
        text-decoration: none;
        &:hover {
          color: #649EFF;
        }
      }
      .brand {
        font-size: 16px;
        @include grid(8);
        @include alpha;
        .logo {
          background: image-url('embed/eb_logo_icon.png') no-repeat;
          width: 30px;
          height: 18px;
          float: left;
          margin: 3px 10px 0 0;
          &:hover {
            background-position: 0px -18px;
          }
        }
        sup {
          color: #DD6;
          font-size: 12px;
          position: relative;
          top: -5px;
        }
      }
      .quick-links {
        padding-top: 1px;
        @include grid(16);
        @include omega;
        text-align: right;
        a {
          margin-left: 20px;
        }
      }
    } /* /nav */
    .notes {
      @include handwritten-font;
      line-height: 1em;
      font-size: 18px;
      color: #FFF;
      text-align: center;
      top: 30px;
      height: 150px;
      margin-bottom: -150px;
      .strap-line {
        position: relative;
        left: -40px;
        top: 40px;
        width: 150px;
        .arrow {
          position: absolute;
          left: 105px;
          top: -5px;
          height: 25px;
          width: 24px;
          background: image-url('welcome/sprites.png') no-repeat -10px -310px;
        }
      }
      .login-note {
        position: relative;
        left: 750px;
        top: -25px;
        width: 100px;
        .arrow {
          position: absolute;
          left: 100px;
          top: -15px;
          height: 36px;
          width: 23px;
          background: image-url('welcome/sprites.png') no-repeat -44px -304px;
        }
      }
    }
  }
}

section.features {
  background: #4070B8 image-url('welcome/blue_grid_bg.jpg') repeat-x center center;
  height: 652px;
  .wrapper {
    @include wrapper960;

    .branding {
      height: 145px;
      @include grid-prefix(6);
      @include grid(15);
      padding-top: 15px;
      h1.logo {
        float: left;
        @include clarendon-font;
        font-size: 70px;
        color: #FFF;
      }
      .beta {
        float: left;
        background: image-url('welcome/sprites.png') no-repeat -10px -5px;
        width: 85px;
        height: 30px;
        margin: 40px 0 0 10px;
      }
      h2.strap-line {
        clear: left;
        position: relative;
        @include handwritten-font;
        font-size: 20px;
        color: #6E9DDB;
        top: -45px;
        left: 140px;
      }
    }

    $title-color: #152A2A;

    .feature-nav {
      @include grid(5);
      margin-top: 60px;
      ul {
        list-style-type: none;
        li {
          cursor: pointer;
          font-family: "Verdana", sans-serif;
          color: white;
          font-size: 13px;
          margin: 0 0 15px 0;
          padding: 4px 45px 4px 10px;
          text-align: right;
          -moz-border-radius: 20px;
          border-radius: 20px;
          font-weight: bold;
          .text {
            display: inline;
            @include single-text-shadow(#003, 1px, 1px, 0)
          }
          &.selected {
            background-color: #365791;
            @include single-box-shadow(#000033, 2px, 2px, 6px, false, false)
          }
        }
      }
    }

    .dual-cards-container {
      @include grid(16);
      margin-left: -($ninesixty-grid-width / $ninesixty-columns);
      z-index: 2;
      .dual-cards {
        z-index: 3;
        background: image-url('welcome/card-sprites.png') no-repeat;
        width: 677px;
        height: 451px;
        .card {
          position: absolute;
          display: none;
          cursor: pointer;
          &.visible {
            display: block;
          }
        }
        .story-card {
          position: absolute;
          background: image-url('welcome/card-sprites.png') no-repeat -684px 0px;
          width: 235px;
          height: 340px;
          margin: 32px 0 0 11px;
          padding: 20px 30px 20px 30px;
          .title {
            @include clarendon-font;
            font-size: 25px;
            border-bottom: 2px solid $title-color;
            color: $title-color;
          }
          .value {
            @include handwritten-font;
            font-size: 23px;
            color: #003366;
            line-height: 1.2em;
            margin-bottom: 10px;
            margin-top: 1px;
          }
        }
        .criteria-card {
          position: absolute;
          background: image-url('welcome/card-sprites.png') no-repeat -684px 0px;
          width: 235px;
          height: 340px;
          margin: 32px 0 0 350px;
          padding: 20px 30px 20px 30px;
          .title {
            @include clarendon-font;
            font-size: 20px;
            border-bottom: 2px solid $title-color;
            color: $title-color;
          }
          ol {
            margin-top: 5px;
            li {
              margin: 0;
              padding: 8px 0 8px 0;
              list-style: none;
              @include handwritten-font;

              font-size: 16px;
              line-height: 1em;
              color: #003366;
              border-bottom: 2px solid #DDEEEE;
              &:last-child {
                border-bottom: none;
              }
            }
          }
        }
        .front-label, .back-label {
          position: relative;
          @include handwritten-font;
          color: #6B8CB8;
          font-size: 18px;
          top: 425px;
        }
        .front-label {
          clear: left;
          float: left;
          left: 30px;
        }
        .back-label {
          float: left;
          left: 520px;
        }
      }
    }
    /* /.dual-cards-container */

    .demos {
      @include grid-prefix(1);
      @include grid(3);
      margin-top: 30px;
      @include handwritten-font;
      color: #FFF;
      font-size: 18px;
      a.video-demo {
        background: image-url('welcome/sprites.png') no-repeat 0px -195px;
        width: 126px;
        height: 110px;
        display: block;
        margin: 0 0 50px -2px;
      }
      a.screenshot-demo {
        background: image-url('welcome/sprites.png') no-repeat 0px -50px;
        width: 126px;
        height: 150px;
        display: block;
        margin: 5px 0 0 -2px;
      }
      .screen-shots {
        display: none;
      }
    }

  }
}

section.content-mix {
  background: #F3F3F3 image-url('embed/white_grain.png') repeat;
  .divider-top {
    background: image-url('welcome/zig_zag.png') repeat-x;
    height: 8px;
    position: relative;
    top: -8px;
  }
  .star-burst {
    background: image-url('welcome/sprites.png') no-repeat 0px -350px;
    width: 150px;
    height: 152px;
    @include handwritten-font;
    color: #264C4C;
    vertical-align: middle;
    padding: 20px;
    font-size: 23px;
    line-height: 1em;
    text-align: center;
    &.medium-text {
      padding-top: 20px + 30px;
      height: 152px - 30px;
    }
    &.less-text {
      padding-top: 20px + 45px;
      height: 152px - 45px;
      padding-left: 30px;
      padding-right: 30px;
      width: 130px;
    }
  }
  section.content {
    @include wrapper960;
    @include clearfix;
    margin-top: 10px;
    margin-bottom: 10px;

    h2 {
      color: #335284;
      font-size: 28px;
      @include clarendon-font;
    }

    a {
      color: #0000DD;
      text-decoration: underline;
      &:hover {
        color: #000;
      }
    }

    .testimonial {
      @include grid-prefix(2);
      @include grid(5);
      .quote {
        font-size: 13px;
        color: #333;
        .quote-mark {
          color: #335284;
          font-size: 60px;
          @include clarendon-font;
          margin-top: -15px;
          margin-bottom: -35px;
          &.closed {
            text-align: right;
          }
        }
      }
      .credit {
        color: #335284;
        @include handwritten-font;
        font-size: 23px;
      }
      .job-title {
        color: #666;
        font-size: 13px;
        @include single-text-shadow(#FFF, 1px, 1px, 0)
      }
    }

    .about {
      @include grid-prefix(1);
      @include grid(9);
      color: #333;
      font-size: 13px;
    }

    .request-access {
      @include grid-prefix(1);
      @include grid(6);
      color: #333;
      font-size: 13px;
      .intro {
        margin: 20px 0 10px 0;
      }
      input[type=text] {
        font-size: 16px;
        font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
        color: #777;
        width: $ninesixty-grid-width / 24 * 6 - $ninesixty-gutter-width * 2 - 10;
        margin-bottom: 10px;
        border: 1px solid #333;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 5px;
        &.enabled {
          color: #000;
        }
        &.invalid {
          border: 2px solid #DD0000;
        }
        @include single-box-shadow(#666, 0, 0, 4px, false, false);
      }
      input[type=submit] {
        float: left;
        background: transparent image-url('welcome/sprites.png') no-repeat 0px -545px;
        width: 145px;
        height: 55px;
        font-size: 14px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        &.disabled {
          @include opacity(0.4);
        }
      }
      .progress {
        display: none;
        float: left;
        margin: 17px 0 0 20px;
        background: image-url('progress.gif');
        width: 16px;
        height: 16px;
      }

      .error-message {
        color: #DD0000;
        .container {
          text-align: center;
          font-weight: bold;
          padding: 3px;
          @include handwritten-font;
          font-size: 18px;
          margin-bottom: 5px;
        }
      }

      p.offer {
        border: 2px solid #FFF;
        padding: 10px;
        font-weight: bold;
        @include border-radius(10px, 10px);
        @include single-box-shadow(#000000, 0, 0, 5px, false, false);
      }
    }
  }
  .divider-bottom {
    background: image-url('welcome/zig_zag.png') repeat-x 0px -19px;
    height: 8px;
    position: relative;
    top: 8px;
  }
}

/* text to display when user clicks on text boxes */
.faded-request-access {
  font-size: 16px;
  color: #DDD;
  font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
}

section.content-wrapper {
  min-width: $ninesixty-grid-width;
  @include grid-system(12);
}

section.header {
  background-color: $body-bg;
  margin: 0 auto 0 auto;
  @include grid($ninesixty-columns);
  .logo {
    @include grid(9);
    @include alpha;
    h1 {
      padding: 0 $ninesixty-gutter-width/2 0 $ninesixty-gutter-width/2;
    }
  }
  .links {
    @include grid(3);
    @include omega;
    .container {
      padding: $ninesixty-gutter-width;
    }
  }
}

.footer {
  background: $body-bg image-url('welcome/footer_bg.png') repeat-x top;
  padding-top: 60px;
  .wrapper {
    @include wrapper960;
    @include clearfix;
    .twitter {
      a {
        text-decoration: none;
        .logo {
          @include grid(2);
          display: block;
          background: image-url('welcome/sprites.png') no-repeat -139px -206px;
          width: 50px;
          height: 34px;
        }
        .copy {
          @include grid(6);
          @include handwritten-font;
          font-size: 16px;
          margin-top: 10px;
          display: block;
          color: white;
        }
        &:hover {
          .logo {
            background-position: -139px -240px;
          }
          .copy {
            color: black;
          }
        }
      }
    }
    .links {
      @include grid(24);
      margin-top: 5px;
      color: #152134;
      padding-bottom: 20px;
      .copyright-notice {
        margin-right: 30px;
        display: inline;
      }
      a {
        font-size: 12px;
        margin-right: 15px;
        color: white;
        text-decoration: none;
        &:hover {
          color: black;
        }
      }
    }
  }

  /* fixed position */
  a.feedback-button {
    /* only show when DOM is ready */
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: image-url('feedback.png') no-repeat;
    &:hover {
      background-position: 0px -100px;
    }
  }
}

/* borrowed from primary site CSS */
/* errors, notices, warnings and inline form errors */
#alert-space {
  position: fixed;
  left: 50%;
  overflow: hidden;
  margin-left: -250px;
  width: 500px;
  top: 0;
  z-index: 5;
  -moz-border-radius: 9px;
  border-radius: 9px;
  .notice, .error, .warning {
    display: block;
    text-align: center;
    padding: 3px;
    background-color: #ccffcc;
    font-weight: bold;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 2px solid black;
  }
  .error {
    background-color: #F55656;
  }
  .warning {
    background-color: #FFB300;
  }
}